<template>
	<el-tabs v-model="defaultLoginMod">
		<el-tab-pane label="微信扫码" name="wxqrcode">
			<wxlogin :appid="wechat_app_id" scope="snsapi_login" theme="black"
				:redirect_uri="encodeURIComponent(redirectUri)"
				href="data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxle2Rpc3BsYXk6bm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlcntkaXNwbGF5Om5vbmV9Ci5pbXBvd2VyQm94IC5xcmNvZGV7Ym9yZGVyOm5vbmU7d2lkdGg6MjAwcHg7aGVpZ2h0OjIwMHB4fQouaW1wb3dlckJveCAuc3RhdHVze2Rpc3BsYXk6bm9uZX0="
				rel="external nofollow">
			</wxlogin>
		</el-tab-pane>
		<el-tab-pane label="手机号登录" name="phone">
			<el-form :model="Register" :rules="smsRules" ref="RegisterForm" label-width="0" class="RegisterForm">
				<el-form-item prop="phonenumber">
					<el-input v-model="Register.phonenumber" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item prop="checkcode" class="code">
					<el-input v-model="Register.checkcode" placeholder="请输入验证码"></el-input>
					<el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码
					</el-button>
					<el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==true">{{btntxt}}
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
						@click.native.prevent="submitForm">
						<span v-if="!loading">登 录</span>
						<span v-else>登 录 中...</span>
					</el-button>
				</el-form-item>
			</el-form>
		</el-tab-pane>
	</el-tabs>
</template>

<!-- main.js
Vue.prototype.msgSuccess = function (msg) {
  this.$message({ showClose: true, message: msg, type: "success" });
}

Vue.prototype.msgError = function (msg) {
  this.$message({ showClose: true, message: msg, type: "error" });
}

Vue.prototype.msgInfo = function (msg) {
  this.$message.info(msg);
} -->

<script>
	import wxlogin from 'vue-wxlogin'
	import {
		sendVerifyCode,
		smsLogin
	} from '@/api/login'
	export default {
		name: "SmsLogin",
		components: {
			wxlogin,
		},
		data() {
			var validatePhone = (rule, value, callback) => {
				if (value.length !== 11) {
					callback(new Error('请输入正确的手机号!'));
				} else if (!/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)) {
					callback(new Error('请输入正确的手机号!'));
				} else {
					callback();
				}
			};
			return {
				/* 微信扫码登录 */
				redirectUri: 'go.qiyeetech.com/#/',
				wechat_app_id: 'wxd1627fefe5137452',
				defaultLoginMod: 'wxqrcode',
				/* 手机验证码登录 */
				Register: {
					phonenumber: '',
					checkcode: '',
				},
				smsRules: {
					phonenumber: [{
							required: true,
							trigger: 'blur',
							message: '手机号不能为空',
						},
						{
							validator: validatePhone,
							trigger: 'blur'
						}
					],
					checkcode: [{
						required: true,
						trigger: 'blur',
						message: '验证码不能为空',
					}]
				},
				disabled: false,
				time: 0,
				btntxt: "重新发送",
			}
		},
		methods: {
			//手机验证发送验证码
			sendcode() {
				this.$refs.RegisterForm.validateField("phonenumber", async (valid) => {
					if (valid === "") {
						this.disabled = true;
						try {
							var {
								code,
								uuid,
								msg
							} = await sendVerifyCode(this.Register.phonenumber)
							if (code == 200) {
								this.msgSuccess("发送成功")
								this.Register.uuid = uuid
								this.time = 60;
								this.disabled = true;
								this.timer();
							} else {
								this.msgError('发送失败：' + msg)
							}
						} catch (e) {
							this.disabled = false;
						}
					}
				})
			},
			//60S倒计时
			timer() {
				if (this.time > 0) {
					this.time--;
					this.btntxt = this.time + "s后重新获取";
					setTimeout(this.timer, 1000);
				} else {
					this.time = 0;
					this.btntxt = "获取验证码";
					this.disabled = false;
				}
			},
			// 手机验证登录
			submitForm() {
				this.$refs.RegisterForm.validate((valid) => {
					if (valid) {
						this.loading = true
						smsLogin(this.Register).then(res => {
						  sessionStorage.setItem("Admin-Token",res.token)
						  this.$router
						  	.push({
						  		path: this.redirect || '/'
						  	})
						  	.catch(() => {})
						}).catch(error => {
						  this.loading = false
						  this.msgError('登录失败')
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.code {
		.el-input {
			width: calc(100% - 160px);
			float: left;
			display: inline-block;
		}

		.el-button {
			width: 150px;
			float: right;
			display: inline-block;
		}

		.el-button--medium {
			padding: 11px 20px;
		}
	}
</style>
